<template>
  <div id="app" class="container">
    <div class="search-box">
      <input type="text" v-model="searchKey" placeholder="Search by key...">
      <button @click="getByKey(searchKey)" style="margin: 0 20px">
        搜索
      </button>
      <button @click="showAddForm = true;n++">
        添加
      </button>
    </div>
    <div v-if="showAddForm" class="add-form">
      <input type="number" v-model="indes.keyy" placeholder="Keyy">
      <input type="text" v-model="indes.value" placeholder="Value" style="margin: 0 20px">
      <button @click="add(indes)" style="margin: 0 20px">OK</button>
      <button @click="showAddForm = false">Cancel</button>
    </div>
    <table>
      <thead>
      <tr>
        <th>#</th>
        <th>Key</th>
        <th>Value</th>
        <th>Operation</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in dataList" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ item.keyy }}</td>
        <td>{{ item.value }}</td>
        <td><span class="operation-button"
                  @click="deleteItem(item.keyy)">删除</span></td>
      </tr>
      </tbody>

    </table>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      dataList: [],
      searchKey: '',
      showAddForm: false,
      indes: {},
      BASE_URL: 'http://localhost:8181/',
      n: 0,
    }
  },
  computed: {
    filteredList() {
      const searchKey = this.searchKey.toLowerCase();
      if (!searchKey) {
        return this.dataList;
      }
      return this.dataList.filter(item => item.key.toLowerCase() === searchKey);
    }
  },
  methods: {
    deleteItem(key) {
      fetch(this.BASE_URL + `btree/del/${key}`, {
        method: 'get'
      })
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
          })
          .then(data => {
            this.getList();
            console.log('GET Response data:', data);
          })
          .catch(error => {
            console.error('GET Error:', error);
          });
    },
    getList() {
      fetch('/btree/list')
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
          })
          .then(data => {
            console.log('GET Response data:', data);
            this.dataList = data.data;
          })
          .catch(error => {
            console.error('GET Error:', error);
          });
    },
    add(data) {
      fetch(this.BASE_URL + 'btree/add', {
        method: 'POST', // 或者 'PUT'
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data), // data should be an object
      })
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
          })
          .then(data => {
            this.getList();
            this.showAddForm = false;
            console.log('POST Response data:', data);
          })
          .catch(error => {
            alert('添加失败')
            console.error('POST Error:', error);
          });
    },
    getByKey() {
      if (!this.searchKey) {
        this.getList();
        return;
      }
      fetch(this.BASE_URL + `btree/getByKey/${this.searchKey}`)
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
          })
          .then(data => {
            this.dataList = data.data;
            console.log('GET Response data:', data);
          })
          .catch(error => {
            alert('搜索失败:' + error);
            console.error('GET Error:', error);
          });
    }
  },
  mounted() {
    this.getList();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  max-width: 600px;
  margin: auto;
}

.search-box {
  text-align: center;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.operation-button {
  cursor: pointer;
  color: red;
}

.add-form {
  margin-bottom: 20px;
  display: flex;
}

/* .add-form {
     display: flex;
     flex-direction: column;
     padding: 10px;
     border: 1px solid #ddd;
     margin-top: 10px;
 }
 .add-form input {
     margin-bottom: 10px;
 }
 .add-form button {
     cursor: pointer;
 }*/
</style>
